<!--
 * @Description: 模拟协同云跳转页 
 * @Author: 黄勇
 * @Date: 2020-03-09 15:36:26
 * @LastEditTime : 2021-02-22 18:36:46
 * @LastEditors  : 陈韵同
 -->
<template>
    <div class="login">
        <CloudInput v-model="input" placeholder="请输入cookie中的authorization字段"></CloudInput>
        <CloudButton type="primary" @click="mockLogin">确定</CloudButton>
    </div>
</template>

<script>
import {CloudInput,CloudButton} from "cloud-components";
import store from "../../store";
export default {
    name: "login",
    components: {CloudInput,CloudButton},
    computed: {},
    data: () => ({
        input: "",
    }),
    methods: {
        mockLogin() {
            document.cookie = "authorization=" + this.input;
            this.getUserInfo();
            // this.$router.push({
            //     path: "/library/main",
            // });
            // window.history.pushState({}, 'title', '/design-center-index');
        },
        getUserInfo() {
 
            this.api
                .getUserInfo({}, { method: "get", customRequest: true })
                .then(res => {
                    store.dispatch("user/setUserInfo", res.data);
                    this.redirectToCloudDesignCenter();
                });
        },
        redirectToCloudDesignCenter(user) {
            this.$router.push({
                path: "/workbench",
            });
        },
    },
};
</script>

<style lang="scss">
.login {
    width: 100%;
    height: 100%;
    display: flex;
    padding: 60px;
    padding-left: 80px;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    align-content: center;
    .user {
        flex: 0 0 200px;
        width: 200px;
        height: 60px;
        margin-top: 20px;
        margin-right: 20px;
        border: 1px solid #dfdfdf;
        border-radius: 4px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        padding: 10px 20px;

        cursor: pointer;
        &:hover {
            border-color: #336cfb;
        }
        & > p {
            width: 100%;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
            &:first-child {
                font-size: 20px;
            }
        }
    }
}
</style>
